<template>
    <!-- 二级路由导航栏 -->
    <div class="tabbar">
        <!-- Logo放置处 -->
        <div class="tabbar-logo">
            <img src="">
        </div>
        <!-- 平台名字放置 -->
        <div class="tabbar-name">
            <span style="color: white;">智慧物业</span>
            <span style="color: #3CCBE9;">管理系统</span>
        </div>
        <!-- 搜索框 -->
        <div class="tabbar-search">
            <input type="text">
            <i class="iconfont icon-arrow-down" style="cursor:pointer;"></i>
        </div>
        <!-- 二级路由标签 -->
        <div class="second-router">
            <router-link to="/home/estateManagement/first">物业管理</router-link>
        </div>
        <!-- 用户头像信息 -->
        <div class="user">
            <!-- 欢迎icon图标 -->
            <div class="icon">
                <i class="iconfont icon-tongzhi" style="font-size:24px;"></i>
            </div>
            <span style="color:#ffffff;font-size: 13px;">欢迎</span>
            <!-- 用户头像 -->
            <div class="user-img" @click="goUserDetail">
                <img style="width:36px;height:36px;border-radius:50%;" :src="$store.state.home.userImage">
                <span style="margin-left:4px;">{{ $store.state.home.userName }}</span>
            </div>
        </div>
    </div>
    <router-view></router-view>
</template>

<script>
import '../../assets/iconfont/icon.css'
import { mapState } from 'vuex'; 
import getApi from '@/api/getApi';
import router from '@/router';
import store from '@/store/index.js';
import { onMounted, reactive } from 'vue';
export default {
    setup () {
        const state = reactive({
            userName:''
        })
        // 去用户详情页
        const goUserDetail = () =>{
            router.push('/home/estateManagement/user')
        }
        // 根据存储名读取浏览器cookies中的本地缓存
        const getCookie = (cname) => {   // 参数为存储名
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i].trim();
                if (c.indexOf(name) == 0) return decodeURIComponent(c.substring(name.length, c.length));
            }
            return "";
        };
        onMounted(()=>{

            let headerObj = {
                Authorization:getCookie('token')
            }
            // 获取用户名字
            // getApi('/user/getById','post',{},headerObj).then(res =>{
            //     // console.log(res)
            //     state.userName = res.data.data.name
                
            // })
            store.dispatch('getName')
            // 获取用户头像
            store.dispatch('getUrl')
        })
        return {goUserDetail,state}
    },
    computed:{
        ...mapState(['home'])
    }
}
</script>

<style lang="less" scoped>
.tabbar{
    width: 100vw;
    height: 70px;
    background: #415C85;
    display: flex;
    align-items: center;
    padding: 10px 20px 10px 20px;
    box-sizing: border-box;
    position: relative;
    .tabbar-logo{
        width: 100px;
        height: 100%;
        margin-right: 20px;
    }
    .tabbar-name{
        font-size: 24px;
        font-weight: 500;
        margin-right: 20px;
    }
    .tabbar-search{
        width: 160px;
        height: 30px;
        border: 1px solid #66C6D8;
        border-radius: 4px;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        margin-right: 40px;
        input{
            margin-left: 10px;
            width: 130px;
            height: 20px;
            outline: none;
            border: none;
        }
    }
    .second-router{
        width: 400px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        a{
            text-decoration: none;
            color: #ffffff;
        }
    }
    .user{
        position: absolute;
        right: 20px;
        top: 15px;
        // width: 160px;
        height: 40px;
        display: flex;
        align-items: center;
        .icon{
            height: 30px;
            width: 30px;
            margin-top: 4px;
        }
        .user-img{
            margin-left: 20px;
            // width: 70px;
            height: 30px;
            font-size: 14px;
            display: flex;
            align-items: center;
            color: #FFFFFF;
            font-weight: 300;
            cursor: pointer;
        }
    }
}

</style>